import React, { Component } from 'react';

import "../../styles/allgoods/MyHeader.css"

class MyHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navlist: [
                { name: "综合" }, { name: "销量" }, { name: "新品" }, { name: "价格" }
            ],
            currentIndex: 0
        }
    }


    myClick(index) {
        this.setState({
            currentIndex: index
        })
    }

    render() {
        return (
            <div className='allgoodsheader'>
                <h3>全部商品</h3>
                <input type="text" placeholder='搜索店内商品' />
                <div className='nav'>
                    {
                        this.state.navlist.map((item, index) => {
                            return (
                                <div className={`navlist ${index === this.state.currentIndex ? "active" : ""}`} key={index} onClick={() => { this.myClick(index) }}>
                                    <span>{item.name}</span>
                                </div>)
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyHeader;